<template>
<!-- 头部组件 -->
    <div>
        <div class="top">
            <div class="item container">
                <div class="top-left fl">
                    <h1 class="fl">
                        <a href=""><img src="../assets/img/logo-kmh.png" alt="看漫画"></a>
                    </h1>
                    <!-- 路由跳转 -->
                    <ul class="clearfix fl">
                        <li ><router-link  to="/home"  :class="{'con':num==0}">首页</router-link></li>
                        <li><router-link  to="/renew" :class="{'con':num==1}">更新</router-link></li>
                        <li><router-link  to="/Ranking"  :class="{'con':num==2}">排行</router-link></li>
                        <li><router-link  to="/classify"  :class="{'con':num==3}">分类</router-link></li>
                    </ul>
                </div> 
                <div class="top-right fr clearfix">
                    <!-- 搜索框 -->
                    <div class="r-box1 fl clearfix">
                        <input type="text" placeholder="凤逆天下" @focus="addbox" @blur="deletebox" v-model="searchValue">
                        <i class="ift-search" @click="addsearchValue"></i>
                        <!-- 推荐搜索弹出 addbox -->
                        <div class="catear" v-show="this.searchdata">
                            <div class="mylogon">
                                <h2 v-show="!searchkey">热门搜索</h2>
                                <h2 v-show="searchkey">搜索结果</h2>
                                <ul v-show="!searchkey">
                                    <!-- 限制循环次数 slice(0,10) 或 v-if="index<10"  -->
                                    <li v-for="(item,index) in searchitem.slice(0,10)"  :key="index"  :class="{'search':searchlist==index+1}" @mouseenter="addsearchlist(index+1)">
                                        <a href="" class="text">
                                            <i>{{index+1}}</i>
                                            <p>{{item.comic_name}}</p>
                                        </a>
                                        <a href="" class="imgs">
                                            <img src="../assets/img/ss01.webp" alt="">
                                            <h3>{{item.comic_name}}</h3>
                                            <p>{{item.last_chapter_name}}</p>
                                        </a>
                                    </li>
                                </ul>
                                <ul v-show="searchkey" class="searchastate">
                                    <li v-for="(item,index) in blankdata.slice(0,10)" :key="index" >
                                        <p @click="JumpDetails(item.id)">{{item.title}}</p>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- 头部导航栏  我的头像-->
                    <div class="r-box2 fl">
                        <img src="../assets/img/visitor.png" alt="" class="headPortrait" v-show="!logor" >
                        <img src="../assets/img/tx001.jpeg" alt="" class="headPortrait" v-show="logor" @click="addmy">
                        <!-- 鼠标悬浮 弹出登录 -->
                        <div class="catear">
                            <div class="mylogon">
                                <h2 v-show="!logor">游客</h2>
                                <div v-show="logor" class="logonid">
                                    <h2>@瓜呆</h2>
                                    <p>ID:279842212</p>
                                </div>
                                <ul class="clearfix">
                                    <li>
                                        <img src="../assets/img/my01.png" alt="">
                                        <span>钻石</span>
                                        <span>0</span>
                                    </li> 
                                    <li>
                                        <img src="../assets/img/my02.png" alt="">
                                        <span>金币</span>
                                        <span>0</span>
                                    </li> 
                                    <li>
                                        <img src="../assets/img/my03.png" alt="">
                                        <span>推荐票</span>
                                        <span>0</span>
                                    </li> 
                                    <li>
                                        <img src="../assets/img/my04.png" alt="">
                                        <span>月票</span>
                                        <span>0</span>
                                    </li> 
                                </ul>
                                <button @click="logon" v-show="!logor"><i class="cat-top"></i>登录</button> 
                                <button @click="logout" v-show="logor"><i class="cat-top"></i>退出登录</button> 
                            </div>
                        </div>
                    </div>
                    <!-- 头部导航栏 我的书架 -->
                    <ul class="clearfix fl">
                        <li class="book">
                            <a href="">书架</a>
                            <div :class="{ 'catear':!collstate,'bigcatear':collstate}">
                                <div class="mylogon">
                                    <div class="myimg" v-show="!collstate">
                                        <img src="../assets/img/book.png" alt="">
                                        <p>主人,不收藏漫画怎么追更呢~</p>
                                        <a href="">去找找漫画</a>
                                    </div>
                                    <div class="mycoll" v-show="collstate">
                                        <ul>
                                            <li v-for="(item,inedx) in Collectionstate" :key="inedx">
                                                <div class="collimg">
                                                    <img :src="item.obj.img" alt="">
                                                </div>
                                                <div class="colltitle">
                                                    <h4>{{item.obj.title}}</h4>
                                                    <p>{{item.obj.content}}</p>
                                                </div>
                                            </li>
                                        </ul>
                                        <div class="coll-long">全部收藏 <span>{{colllength}}</span></div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>|</li>
                        <li class="history">
                            <a href="">历史</a>
                            <div class="catear">
                                <div class="mylogon">
                                    <img src="../assets/img/book.png" alt="">
                                    <p>呜呜~主人都没有阅读过漫画诶~</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <!-- 下载APP -->
                    <div class="r-box3 fr">
                        <a href=""><i class="ift-phone phone"></i>下载APP</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {getsearchdata} from "../api/search.js";// 默认搜索框推荐数据
import {getrenewdata} from "../api/renew.js"// 接口请求数据
import {getreaddata} from "../api/read.js"// 自定义数据
    export default {
        props:["num","loginstate","buts"],
        data() {
            return {
                searchdata:false,//  控制 推荐搜索 弹出
                searchlist:1,// 控制 推荐搜索列表
                logor:false,// 登录状态
                searchitem:[],// 默认搜索框推荐
                Collectionstate:[],// 收藏数据
                collstate:false,// 收藏状态
                colllength:0,// 收藏个数
                searchValue:'',// 搜索框用户输入内容
                renewdata:null,// 接口请求数据
                readdata:null,// 自定义数据
                blankdata:[],// 空白的
                searchkey:false,
            };
        },
        methods:{
        //  推荐搜索弹出事件
           addbox(){
                this.searchdata = true;
           },
           deletebox(){
                this.searchdata = false;
           },
            //  搜索
            addsearchValue(){
                this.searchdata = true;
                this.searchkey = true;
                if(this.searchValue){
                    let data = [];
                    this.renewdata.map(item => {
                        if (item.title.indexOf(this.searchValue) !== -1) {
                            data.push(item);
                        }
                    });
                    this.readdata.map(item => {
                        if (item.title.indexOf(this.searchValue) !== -1) {
                            data.push(item);
                        }
                    });
                    console.log(data);
                    if(data.length !=0){
                        this.blankdata = data;
                    }else{
                        this.blankdata = this.renewdata;
                    }
                    console.log(this.blankdata);
                }
            },
            JumpDetails(num){
                let id = num;
                this.$router.push({path:"/details", query: { id } })
            },
           // 推荐搜索列表 鼠标进入事件
           addsearchlist(index){
                this.searchlist = index;
           },
            // 登录按钮 点击事件
           logon(){
                let key = window.localStorage.getItem("username");
                if(key){
                    this.$router.push( {path:"/micenter"})
                }else{
                    this.$emit("loginmethod");
                    // this.logor =!this.logor
                    window.localStorage.setItem("userstate",this.logor)
                }
           },
            // 退出登录
           logout(){
                this.logor =!this.logor
                window.localStorage.removeItem("username");
                window.localStorage.removeItem("userId");
                window.localStorage.removeItem("userstate");
                this.$router.push( {path:"/home"})
           }, 
           addmy(){
                this.$router.push({path: "/micenter"})
           },
           // 数据
           getsearchdatamethod(){
                getsearchdata().then(data=>{
                    this.searchitem = data.data;
                    // console.log(data.data);
            })
           },
           getrenewdatamethod(){
                getrenewdata().then(data=>{
                    this.renewdata = data.data.rec_topics;
                    console.log(data.data);
            })
           },
           getreaddatamethod(){
                getreaddata().then(data=>{
                    this.readdata = data.data;
                    // console.log(data.data);
            })
           },

        },
        created(){
            // 登录状态
            let userstate = window.localStorage.getItem("userstate");
            if(userstate){
                this.logor = userstate
            }
            // console.log(userstate);

            // 数据
            this.getsearchdatamethod();
            this.getrenewdatamethod();
            this.getreaddatamethod();

            // 收藏状态
            this.Collectionstate = JSON.parse(window.localStorage.getItem("Collection"))
            if(this.Collectionstate){
                if(this.Collectionstate.length != 0){
                    this.collstate = true;
                }else{
                    this.collstate = false;
                }
                
                this.colllength = this.Collectionstate.length
            }

        },
        watch:{
            buts(){
                this.Collectionstate = JSON.parse(window.localStorage.getItem("Collection"))
                if(this.Collectionstate){
                    if(this.Collectionstate.length != 0){
                        this.collstate = true;
                    }else{
                        this.collstate = false;
                    }
                    
                    this.colllength = this.Collectionstate.length
                }
                console.log(12356789);
            }
        }

        
    }
</script>

<style lang="scss" scoped>
@import "../assets/css/homePage.css";
@import "../assets/css/font.css";
@import "../assets/css/public.css";
// 登录
.r-box2{
    position: relative;
    
}
.r-box2:hover .headPortrait{
    width: 80px;
    height: 80px;
    border: 1px solid #fc6c79;
    position: absolute;
    left: 0;
    z-index: 100;
}
.r-box2:hover .catear{
    display: block;
    z-index: 10;
}
.r-box2 .catear{
    width: 248px;
    height: 211px;
    padding: 38px 8px 0px;
    background: url(../assets/img/bg-cat-main.png) 0px 0px no-repeat  ;
    background-size: 100%;
    position: absolute;
    top: 54px;
    left: -90px;
    display: none;
}
.r-box2 .catear .mylogon{
    width: 246px;
    height: 193px;
    padding-top: 16px;
    border: 1px solid #FFB5C3;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: inset 0 1px 4px 0 #ffd1d8;
}
.r-box2 .catear .mylogon h2{
    width: 100%;
    height: 36px;
    text-align: center;
    line-height: 36px;
    font-size:14px;
    color: #666;
    font-weight: 400;
}
.r-box2 .catear .mylogon ul{
    width: 210px;
    height: 64px;
    padding: 6px 0px;
    margin: 0 auto;
}
.r-box2 .catear .mylogon ul li{
    float: left;
    width: 105px;
    height: 32px;
    color: #666;
    padding: 0;
    line-height: 32px;
    text-align: left;

}
.r-box2 .catear .mylogon ul li img{
    width: 24px;
    height: 24px;
    margin-right: 2px;
}
.r-box2 .catear .mylogon ul li span{
    display: inline-block;
    font-size: 12px;
    color: #666;
    margin-right:2px ;
}
.r-box2 .catear .mylogon  button{
    width: 200px;
    height: 32px;
    line-height: 32px;
    color: #fff;
    font-size: 14px;
    border-radius: 16px;
    margin: 0 auto;
    border: 0;
    background-image: linear-gradient(0deg,#fc6976,#FC4F71 42%,#FFB5C3);
    position: relative;
}
.r-box2 .catear .mylogon  button:hover{
    box-shadow:0 0 10px 2px #ea9ca2;
}
.r-box2 .catear .mylogon button i{
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../assets/img/cat-stand2.png);
  background-size: 100%;
  position: absolute;
  left: 88px;
  top: -22px;
}
.r-box2 .catear .mylogon .logonid{
    width: 100%;
    height: 36px;
    text-align: center;
    font-size:14px;
    color: #666;
    font-weight: 400;
}
.r-box2 .catear .mylogon .logonid h2{
    width: 100%;
    height: 18px;
    line-height: 18px;
}
.r-box2 .catear .mylogon .logonid p{
    width: 100%;
    height: 18px;
    line-height: 18px;
}
// 书架
.book {
    position: relative;
    
}
.book:hover .catear{
    display: block;
    z-index: 10;
}
.book:hover .bigcatear{
    display: block;
    z-index: 10;
}
.book:hover a{
    color: #fc6976;
}
.book .catear{
    width: 248px;
    height: 211px;
    padding: 38px 8px 0px;
    background: url(../assets/img/bg-cat-main.png) 0px 0px no-repeat  ;
    background-size: 100%;
    position: absolute;
    top: 49px;
    left: -108px;
    display: none;
}
.book .bigcatear{
    width: 248px;
    height: 258px;
    padding: 38px 8px 0px;
    background: url(../assets/img/bg-cat-main.png) 0px 0px no-repeat  ;
    background-size: 100%;
    position: absolute;
    top: 49px;
    left: -108px;
    display: none;
}
.book .catear .mylogon{
    width: 222px;
    height: 187px;
    padding: 12px;
    border: 1px solid #FFB5C3;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: inset 0 1px 4px 0 #ffd1d8;
}
.book .bigcatear .mylogon{
    width: 222px;
    height: 235px;
    padding: 12px;
    border: 1px solid #FFB5C3;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: inset 0 1px 4px 0 #ffd1d8;
}
.book .catear .mylogon .myimg img{
    width: 80px;
    height: 80px;
    margin: 0px 71px 20px;
}
.book .catear .mylogon .myimg p{
    width: 100%;
    height: 20px;
    color: #999;
    font-size: 12px;
    line-height: 20px;
}
.book .catear .mylogon .myimg a{
    // display: inline-block;
    width: 100%;
    height: 24px;
    color: #fc6976;
    font-size: 14px;
    line-height: 24px;
    vertical-align: top;
}
.book .bigcatear .mylogon .mycoll {
    width: 100%;
    height: 100%;
}
.book .bigcatear .mylogon .mycoll ul {
    width: 100%;
    height: 180px;
    padding: 0;
    overflow: hidden;
}
.book .bigcatear .mylogon .mycoll ul li {
    padding: 0;
    width: 100%;
    height: 80px;
    border-radius:5px ;
    box-shadow: 1px 0 3px 0 #ffd1d8;
    border: 1px solid #FFD1D8;
    margin-bottom:10px ;
}
.book .bigcatear .mylogon .mycoll ul li .collimg{
    float: left;
    width: 60px;
    height: 80px;
    overflow: hidden;
    background-color: #FC4F71;
}
.book .bigcatear .mylogon .mycoll ul li .collimg img{
    width: 100%;
    height: 100%;
}
.book .bigcatear .mylogon .mycoll ul li .colltitle {
    float: left;
    width: 152px;
    height: 64px;
    margin-left:10px ;
    padding: 8px 0;
    color: #666;
}
.book .bigcatear .mylogon .mycoll ul li .colltitle h4{
    width: 100%;
    height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    line-height: 30px;
    text-align: left;
}
.book .bigcatear .mylogon .mycoll ul li .colltitle p{
    width: 100%;
    height: 16px;
    padding-top:18px ;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    line-height: 16px;
}
.book .bigcatear .mylogon .mycoll .coll-long{
    width: 100%;
    height: 32px;
    line-height: 32px;
    border-radius: 16px;
    margin-top: 10px;
    font-size: 12px;
    background-color: #FFB5C3;;
    color: #ff4b6c;
}



// 历史
.history {
    position: relative;
    
}
.history:hover .catear{
    display: block;
    z-index: 10;
}
.history:hover a{
    color: #fc6976;
}
.history .catear{
    width: 248px;
    height: 211px;
    padding: 38px 8px 0px;
    background: url(../assets/img/bg-cat-main.png) 0px 0px no-repeat  ;
    background-size: 100%;
    position: absolute;
    top: 49px;
    left: -108px;
    display: none;
}
.history .catear .mylogon{
    width: 222px;
    height: 120px;
    padding: 12px;
    border: 1px solid #FFB5C3;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: inset 0 1px 4px 0 #ffd1d8;
}
.history .catear .mylogon img{
    width: 80px;
    height: 80px;
    margin: 0px 71px 20px;
}
.history .catear .mylogon p{
    width: 100%;
    height: 20px;
    color: #999;
    font-size: 12px;
    line-height: 20px;
}
.history .catear .mylogon a{
    // display: inline-block;
    width: 100%;
    height: 24px;
    color: #fc6976;
    font-size: 14px;
    line-height: 24px;
    vertical-align: top;
}
// 搜索框 
.r-box1 .catear{
    width: 248px;
    height: 390px;
    padding: 38px 8px 0px;
    background: url(../assets/img/bg-cat-main.png) 0px 0px no-repeat  ;
    background-size: 100%;
    z-index: 10;
}
.r-box1 .catear .mylogon{
    width: 246px;
    height: 372px;
    padding: 8px 0px;
    background-color: #fff;
    border: 1px solid #FFB5C3;
    border-radius: 8px;
    box-shadow: inset 0 1px 4px 0 #ffd1d8;
}
.r-box1 .catear .mylogon h2{
    width: 214px;
    height: 32px;
    margin: 0px 16px 4px;
    font-size: 14px;
    color: #fc6976;
    line-height: 32px;
    font-weight: 400;
}
.r-box1 .catear .mylogon ul {
    width: 100%;
    height: 332px;
    padding: 0;
}
.r-box1 .catear .mylogon ul li{
    width: 246px;
    padding: 0;
}
.r-box1 .catear .mylogon ul li.search .text{
    display: none;
}
.r-box1 .catear .mylogon ul li.search .imgs{
    display: block;
}
.r-box1 .catear .mylogon ul li .text{
    display: block;
    width: 186px;
    height: 20px;
    padding: 4px 18px 0px 44px;
    margin-bottom:4px ;
    position: relative;
}
.r-box1 .catear .mylogon ul li:nth-child(1) .text i{
    width: 20px;
    height: 20px;
    position: absolute;
    left: 16px;
    top: 4px;
    background: url(../assets/img/di01.png) no-repeat;
    background-size: 100%;
    color: transparent;
}
.r-box1 .catear .mylogon ul li:nth-child(2) .text i{
    width: 20px;
    height: 20px;
    position: absolute;
    left: 16px;
    top: 4px;
    background: url(../assets/img/di02.png) no-repeat;
    background-size: 100%;
    color: transparent;
}
.r-box1 .catear .mylogon ul li:nth-child(3) .text i{
    width: 20px;
    height: 20px;
    position: absolute;
    left: 16px;
    top: 4px;
    background: url(../assets/img/di03.png) no-repeat;
    background-size: 100%;
    color: transparent;
}
.r-box1 .catear .mylogon ul li .text i{
    width: 20px;
    height: 20px;
    position: absolute;
    left: 16px;
    top: 4px;
    font-size: 14px;
    color: #666;
    text-align: center;
    line-height: 20px;
    font-style:normal;
    background-color: #fff;
}
.r-box1 .catear .mylogon ul li .text p{
    display: inline-block;
    width: 186px;
    height: 20px;
    font-size: 14px;
    color: #333;
    text-align: left;
    line-height: 20px;
    vertical-align: top;
}
.r-box1 .catear .mylogon ul li .imgs{
    display: none;
    width:126px ;
    height: 40px;
    padding: 20px 16px 20px 72px;
    margin: 0px 16px 4px;
    position: relative;
    overflow: hidden;
    background-color: #FFF4F4;
    box-shadow: 0 0 4px 0 #ffd1d8;
    border-radius: 0 8px 8px 0;
    text-align: left;
}
.r-box1 .catear .mylogon ul li .imgs img{
    width:63px;
    height: 84px;
    position: absolute;
    left: 0px;
    top: 0;
    transition: all 0.2s linear 0s;
}
.r-box1 .catear .mylogon ul li .imgs img:hover{
    width:63px;
    height: 84px;
    position: absolute;
    left: 0px;
    top: -4px;
    transition: all 0.2s linear 0s;
}
.r-box1 .catear .mylogon ul li .imgs h3{
    width: 126px;
    height: 22px;
    color: #fc6976;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
}
.r-box1 .catear .mylogon ul li .imgs p{
    width: 126px;
    height: 18px;
    color: #999;
    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
}
.searchastate li{
    text-align: left;
}
.searchastate li p{
    font-size: 14px;
    color: #666;
    padding: 0 16px;
}
.searchastate li:hover p{
    font-size: 14px;
    color: #fc6976;
    padding: 0 16px;
    cursor: pointer;
}


</style>